<template>
  <div class="">
    		{{message}}
			<p v-text="bangding"></p>
			list的长度：（{{zongshu}}）
			<br />
			<input type="text" v-model="bangding" />
			<input type="button" value="添加" @click="tianjia()" />
			<table border="1" cellspacing="0">
				<tr v-for="(item,index) in list">
					<td>{{item.cont}}</td>
					<td><button @click="wancheng(index)" :class="{wanch:item.wan}">{{item.wan?"完成":"未完成"}}</button></td>
					<td><button @click="shanchu(index)">删除</button></td>
				</tr>
			</table>	
			<button @click="xianif()">v-if</button>
			<div v-if="xiani">v-if</div>
			<button @click="xiansh=!xiansh">v-show</button>
			<div v-if="xiansh">v-show</div>
  </div>
</template>

<script>
export default {
	data(){
		return {
			bangding:"aa",
			mou:{
				id:null,
				cont:"",
				wan:false
			},
			message:"弓长",
			
			list:[
				{id:1,cont:"第一个",wan:false},
				{id:2,cont:"第二个",wan:false},
				{id:3,cont:"第三个",wan:false},
				{id:4,cont:"第四个",wan:false}
			],
			xiani:true,
			xiansh:true
		}
				
	},
	methods:{
		wancheng(index){
			this.list[index].wan=!this.list[index].wan
		},
		shanchu(index){
			this.list.splice(index,1)
		},
		tianjia(){
			this.mou.cont=this.bangding
			this.list.push(
				{id:null,cont:this.bangding,wan:false}
			)
			this.bangding=""
			console.log(this.mou)
		},
		xianif(){
			this.xiani=!this.xiani
		}
		
	},
	computed:{
		zongshu(){
			return this.list.length
		}
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="css">
	button {
				outline: none;
				border: 0;
			}
			.wanch {
				background: greenyellow;
			}
			td {
				width: 100px;
				text-align: center;
			}
</style>